<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/cts.css" />
    <script src="/js/util.js"></script>
    <script src="/js/author.js"></script> 
    <script>
      function updateChat() {
          downloadUrl("/getchats", "GET", null, onChatsReturned);
      }
      
      function sendChat(form) {
        
        downloadUrl("/getchats", "POST", "content=" + encodeURI(document.getElementById("chattext").value), onChatsReturned);
        document.getElementById("chattext").value = "";
      }

      function onChatsReturned(responseText) {
        document.getElementById("chats").innerHTML = responseText;
        scrollToBottom();        
      }

      function setup() {
        window.setInterval("updateChat()", 5000);
        updateChat();
      }
      
      function scrollToBottom() {
        var chatDiv = document.getElementById("chats");
        chatDiv.scrollTop = chatDiv.scrollHeight;
      }      
	</script>
  </head>

  <body onload="setup()">
  	{% if user %}
    	<div align="right">
          <!--<a href="/edituser/{{ user.email }}">Edit My Profile</a> -->
    	   <a href="/edituser/{{ user.email }}">Edit My Profile</a> -
        <a href="{{log_in_out_url}}">Sign out</a> </div>
   	{% else %}
    	<div align="right"><a href="{{log_in_out_url}}">Log in</a></div>
    {% endif %}
    <div>
      <form action="javascript:sendChat();">
        <div class="enterWrapper">
          <input placeholder="Add a word" name="content" type="text" id="chattext" maxLength="15" class="enterWord" size="100" required></input>
          <input class="enter" type="submit" value="Enter"></input>
        </div>
      </form>
    </div>
    <div class="chatsWrapper">
      <div id="chats" style="margin-right:30px;margin-left:30px;padding:10px;background-color:white;height:85%; overflow:auto;">
      </div>
    </div>  
      <br/>
  </body>
</html>